/*
* @Author: Administrator
* @Date:   2018-09-07 20:16:46
* @Last Modified by:   Administrator
* @Last Modified time: 2018-09-15 10:05:26
*/
import React from 'react';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { actionCreators as loginActionCreators } from '../../pages/login/store';
import { HeaderWrapper, 
         Logo,
         Nav,
         NavItem,
         SearchInfo,
         SearchInfoTitle,
         SearchInfoSwitch,
         SearchInfoItem,
         SearchWrapper,
         NavSearch,
         Addition,
         Button
       } from './style.js';
class Header extends React.Component {
  ArrayList () {
    const { focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, changePageAdd } = this.props;
    const jsList = list.toJS();
    const pageList = [] ;
    for (let i = (page - 1) * 10; i < page * 10; i++) {
      pageList.push(<SearchInfoItem key={i}>{jsList[i]}</SearchInfoItem> )
    }
    if (focused || mouseIn) {
    return (
      <SearchInfo
        onMouseEnter={handleMouseEnter.bind(this)}
        onMouseLeave={handleMouseLeave.bind(this)}
      >
        <SearchInfoTitle>
          热门搜索
          <SearchInfoSwitch onClick = {() => {changePageAdd(page,totalPage,this.weiqi)}}>
            <i ref={(song) => {this.weiqi = song}} className="iconfont song">&#xe851;</i>
            换一批
          </SearchInfoSwitch>
        </SearchInfoTitle>
        <div>
          {pageList}
        </div>
      </SearchInfo>
    )
   }
   else {
    return null;
   }
}
  render () {
    const { focused, onFocus, onBlur, list, login, logout } = this.props;
    return (
    <HeaderWrapper>
      <Link to='/'>
        <Logo/>
      </Link>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          { login === false ? 
            
            <Link to='./login'><NavItem className="right">登录</NavItem></Link> :

            <NavItem onClick={logout} className="right">退出</NavItem>
          }
          <NavItem className="right">
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition 
              in={focused}
              timeout={300}
              classNames="slide"
            >
            <NavSearch 
              onFocus={() => {onFocus(list)}}
              onBlur={onBlur.bind(this)} 
              className={focused ? 'focused' : ''}>
            </NavSearch>
            </CSSTransition>
            <i 
              className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>
              &#xe614;
            </i>
            {this.ArrayList()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className="zhuce">注册</Button>
          <Link to='/write'>
            <Button className="writting"><i className="iconfont">&#xe615;</i>写文章</Button>
          </Link>
        </Addition>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    //因为引用了immutable.js  所以在这里引用需要用get 方法
    focused: state.getIn(['header', 'focused']),//因为之前是直接从reducer的state取出来的现在是从header中取出的
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    login : state.getIn(['login','login'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onFocus (list) {
      (list.size === 0) && dispatch(actionCreators.getList());
      dispatch(actionCreators.getFocuse());
    },
    onBlur () {
      dispatch(actionCreators.loseFocuse());
    },
    changePageAdd (page,totalPage,song) {
        let originAngle = song.style.transform.replace(/[^0-9]/ig,'');
        if (originAngle) {
          originAngle = parseInt(originAngle,10);
        }
        else {
          originAngle = 0;
        }
        song.style.transform = 'rotate( '+ (originAngle + 360) +'deg)' 
      if (page < totalPage) {
        dispatch(actionCreators.changePage(page + 1));
      }
      else if (page = totalPage) {
        dispatch(actionCreators.changePage(1));
      }
    },
    handleMouseEnter () {
      dispatch(actionCreators.mouseEnter());
    },
    handleMouseLeave () {
      dispatch(actionCreators.mouseLeave());
    },
    logout () {
      dispatch(loginActionCreators.logout());
    }
  }
}

export default  connect(mapStateToProps,mapDispatchToProps)(Header);